<template>
  <div>
    <el-card shadow="never">
      <!-- 加载状态 -->
      <el-loading
        v-if="loading"
        text="数据加载中..."
        fullscreen
        background="rgba(255, 255, 255, 0.8)"
      />

      <!-- 欢迎信息 -->
      <div class="flex items-center">
        <el-avatar :src="avatar" :size="70" class="mr-16px">
          <img src="@/assets/imgs/avatar.gif" alt="默认头像" />
        </el-avatar>
        <div>
          <div class="text-20px">
            {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
          </div>
          <div class="mt-10px text-14px text-gray-500">
            {{ t('workplace.toady') }}，20℃ - 32℃！
          </div>
        </div>
      </div>

      <!-- 堆叠折线图区域：核心修改！添加网格布局类实现左右排列 -->
      <!-- <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="bg-white p-4 rounded-lg shadow-sm">
          <h3 class="text-lg font-medium mb-4">航机数据统计</h3>
          <EChart :options="lineChartOptions" height="400px" />
        </div>
        <div class="bg-white p-4 rounded-lg shadow-sm">
          <h3 class="text-lg font-medium mb-4">航机数据统计</h3>
          <EChart :options="lineChartOptions" height="400px" />
        </div>
      </div> -->
    </el-card>
  </div>
</template>

<script lang="ts" setup>
// 脚本部分无修改，保持原逻辑
import { set } from 'lodash-es'
import type { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { useUserStore } from '@/store/modules/user'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions } from './echarts-data'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { ref, reactive, onMounted } from 'vue' // 修复：原代码PromiseAll导入错误，已移除
import EChart from '@/components/Echart/src/Echart.vue'
import { ProduceRecordApi, ProduceRecordVO } from '@/api/pplan/producerecord'
import { ElMessage, ElLoading } from 'element-plus' // 补充ElMessage导入（原代码报错）

defineOptions({ name: 'WorkplaceIndex' })

const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const loading = ref(true)

// 用户信息
const avatar = userStore.getUser.avatar || ''
const username = userStore.getUser.nickname || '未知用户'
// 折线图配置
const lineChartOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {
    data: [],
    // 移除 position，改用 bottom 控制位置
    bottom: 0, // 图例底部与容器底部对齐（放在最下方）
    left: 'center' // 水平居中显示
  },
  xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false
    // 可选：旋转 X 轴标签避免拥挤
    // axisLabel: {
    //   rotate: 30,
    //   interval: 0
    // }
  },
  yAxis: { type: 'value' },
  series: [],
  // 调整绘图区域底部留白，给图例腾出空间
  grid: { left: '3%', right: '10%', bottom: '15%', containLabel: true }
})
// 航机数据请求
const statisticsApi = async () => {
  try {
    const data = await ProduceRecordApi.getStatistics()
    if (!data) return

    const planeNumbers = Object.keys(data)
    lineChartOptions.legend.data = planeNumbers

    const allDates: string[] = []
    planeNumbers.forEach((plane) => {
      Object.keys(data[plane]).forEach((date) => {
        if (!allDates.includes(date)) allDates.push(date)
      })
    })
    allDates.sort()
    lineChartOptions.xAxis.data = allDates

    lineChartOptions.series = planeNumbers.map((plane) => {
      const values = allDates.map((date) => data[plane][date] || 0)
      return {
        name: plane,
        type: 'line',
        stack: '航机数据',
        data: values,
        emphasis: { focus: 'series' }
      }
    })
  } catch (error) {
    console.error('航机数据加载失败：', error)
    ElMessage.error('航机数据加载失败，请重试') // 修复：原代码缺少ElMessage导入
  }
}

// 页面挂载时加载数据
onMounted(() => {
  statisticsApi()
  // 补充：原代码未调用其他数据请求，可按需添加
  // getCount()
  // getProjects()
  // getUserAccessSource()
  loading.value = false // 补充：加载完成后关闭loading
})
</script>

<style scoped>
/* 原样式保持不变，grid相关类已存在 */
.grid {
  display: grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.md\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap-8 {
  gap: 2rem;
}
.mt-8 {
  margin-top: 2rem;
}
.p-4 {
  padding: 1rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
/* 补充：修复欢迎信息区域的间距类（原代码mr-16px可能不生效，统一用rem） */
.mr-16px {
  margin-right: 1rem; /* 16px ≈ 1rem */
}
.text-20px {
  font-size: 1.25rem;
}
.text-14px {
  font-size: 0.875rem;
}
.text-gray-500 {
  color: #6b7280;
}
</style>